<template>
    <div id="select-prompt-text">
        <div class="label" :style="'background-color:' + color + ';'">{{ label }}</div>
        <div class="delete">
            <el-icon>
                <DeleteFilled />
            </el-icon>
        </div>
    </div>
</template>

<script setup>
import { defineProps, computed } from 'vue';
import { DeleteFilled } from '@element-plus/icons-vue';
const props = defineProps(["color", "label"])

const label = computed(() => { return props.label })
const color = computed(() => {
    if (props.color) {
        return props.color
    } else {
        return "4fdd7e"
    }
})
</script>

<style scoped>
#select-prompt-text {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 13px;
    line-height: 26px;
    border-radius: 3px;
    padding: 0 13px;
    margin-right: 10px;
    align-items: center;
}

#select-prompt-text .delete {
    background-color: rgba(0, 0, 0, 0.1);
    cursor: pointer;
}</style>